iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0
Mobile Development

30天手滑用Google Flutter解鎖Hybrid App成就系列 第 14

30天Flutter手滑系列 - 井字遊戲實作(Tic Tac Toe) (1)

  • 分享至 

  • xImage
  •  

在結束了一系列的基礎教學後,我自己都覺得枯燥乏味了,那就開始來練習做些小東西吧。

認識井字遊戲

井字遊戲我相信每個人都玩過...是吧?是吧?是吧?/images/emoticon/emoticon38.gif
假如真的沒看過,直接來看動畫吧。
https://upload.cc/i1/2019/09/21/iwSPYV.gif

規則介紹

  • 分成X跟O兩方
  • 猜拳決定先手的一方
  • 以每回合輪流在空格填入個別的O或X
  • 直到一方連成一條線(可橫線,直線,斜線)就獲勝,或是空格皆被填滿則平手。

Let's start

  • 首先,我新建了一個專案flutter create tictactoe
  • 進到lib/main.dart,刪掉多餘的註解。
  • 稍微修改一下文字顯示的名稱,讓其符合Tic Tac Toe主題。
    https://ithelp.ithome.com.tw/upload/images/20190921/20120028n23JkLfVvB.png

使用者介面

考慮到遊戲總要有個開始按鈕,然後應該要有個九宮格,所以大概長下面這樣子。
https://ithelp.ithome.com.tw/upload/images/20190921/20120028O13gyMgClr.png

我們修改_TicTacToePageState,加入了一個GridView和Button,完成初步的畫面。

class _TicTacToePageState extends State<TicTacToePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
              child: GridView.count(
            crossAxisCount: 3,
            children: <Widget>[
              Icon(Icons.ac_unit),
              Icon(Icons.airport_shuttle),
              Icon(Icons.all_inclusive),
              Icon(Icons.beach_access),
              Icon(Icons.cake),
              Icon(Icons.free_breakfast),
              Icon(Icons.phone_android),
              Icon(Icons.satellite),
              Icon(Icons.watch)
            ],
          )),
          Center(
            child: ButtonTheme(
              minWidth: 200,
              height: 80,
              child: RaisedButton(
                color: Colors.blue,
                child: Text('Start Game'),
                onPressed: null,
              ),
            ),
          )
        ],
      ),
    );
  }
}

https://ithelp.ithome.com.tw/upload/images/20190921/20120028ymFdJGv3Zt.png

小提示:
如果在Column內要使用GridView,需要先添加Expanded這個Widget,不然畫面是看不到東西的。


總結

今天的畫面就先停留在這個非常初期規劃的UI吧,明天我們再來嘗試改進它。
一個坑一個坑的踩,一個坑一個坑的補。/images/emoticon/emoticon69.gif


上一篇
30天Flutter手滑系列 - Firebase 設定
下一篇
30天Flutter手滑系列 - 井字遊戲實作(Tic Tac Toe)(2)
系列文
30天手滑用Google Flutter解鎖Hybrid App成就30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言